<template>
  <el-row type="flex" class="container">
    <el-col :span="5">
      <div class="container_item">
        <div class="price">
          <span>价格</span>
          <span>0-100</span>
        </div>
        <el-slider v-model="value"></el-slider>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="container_item">
        <div class="choice">
          <span>住宿等级</span>
          <span>
            <el-select v-model="stayRank" multiple collapse-tags placeholder="不限" size="mini">
              <el-option
                v-for="item in stayRankOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </div>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="container_item">
        <div class="choice">
          <span>住宿类型</span>
          <span>
            <el-select v-model="stayType" multiple collapse-tags placeholder="不限" size="mini">
              <el-option
                v-for="item in stayTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </div>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="container_item">
        <div class="choice">
          <span>酒店设施</span>
          <span>
            <el-select v-model="hotelSet" multiple collapse-tags placeholder="不限" size="mini">
              <el-option
                v-for="item in hotelSetOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </div>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="container_item">
        <div class="choice">
          <span>酒店品牌</span>
          <span>
            <el-select v-model="hotelBrand" multiple collapse-tags placeholder="不限" size="mini">
              <el-option
                v-for="item in hotelBrandOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </div>
      </div>
    </el-col>
    <el-col :span="3">
      <div class="container_item last">
        <el-button type="primary">撤销条件</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      value: 50,

      // 住宿等级选项
      stayRankOptions: [
        {
          value: "选项1",
          label: "1星"
        },
        {
          value: "选项2",
          label: "2星"
        },
        {
          value: "选项3",
          label: "3星"
        },
        {
          value: "选项4",
          label: "4星"
        },
        {
          value: "选项5",
          label: "5星"
        }
      ],
      // 住宿等级的数据
      stayRank: [],

      // 住宿等级选项
      stayTypeOptions: [
        {
          value: "选项1",
          label: "经济型"
        },
        {
          value: "选项2",
          label: "舒适型"
        }
      ],

      // 住宿类型的数据
      stayType: [],

      // 酒店设施选项
      hotelSetOptions: [
        {
          value: "选项1",
          label: "wifi"
        },
        {
          value: "选项2",
          label: "热水壶"
        }
      ],

      // 酒店设施的数据
      hotelSet: [],

      // 酒店品牌选项
      hotelBrandOptions: [
        {
          value: "选项1",
          label: "7天连锁"
        },
        {
          value: "选项2",
          label: "汉庭"
        }
      ],

      // 酒店品牌的数据
      hotelBrand: []
    };
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  border: 1px solid #ddd;
  height: 80px;
  margin-top: 20px;
  padding: 6px 0;
  background-color: rgba(255, 255, 255, 0.7);

  .container_item {
    height: 66px;
    border-right: 1px solid #ddd;
    padding: 0 20px;

    &.last {
      border-right: 0px;
      padding: 0px;
      text-align: center;
      line-height: 66px;
    }

    .price {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }

    .choice {
      > span {
        font-size: 14px;
      }

      .el-select {
        margin-top: 10px;
      }
    }
  }
}
</style>